<template>
  <div class="app-container">
    <div v-if="!isManage">
      <div class="history">
        <el-button
          v-if="~accessable.indexOf('theme:goods_current')"
          :type="filters.history == 0 ? 'success' : 'info'"
          size="small"
          v-waves
          @click="now"
        >主题专区</el-button>
        <el-button
          v-if="~accessable.indexOf('theme:goods_history')"
          :type="filters.history == 1 ? 'success' : 'info'"
          size="small"
          v-waves
          @click="history"
        >历史主题专区</el-button>
      </div>
      <div class="filter-container">
        <el-button
          class="filter-item"
          v-if="~accessable.indexOf('theme:goods_add')"
          type="primary"
          v-waves
          icon="el-icon-plus"
          @click="handleUpdate(null)"
        >添加专题专区</el-button>

        <el-input
          @keyup.enter.native="handleFilter"
          style="width: 200px;"
          class="filter-item"
          placeholder="专题名称"
          v-model="filters['title']"
        ></el-input>

        <el-button
          class="filter-item"
          type="primary"
          v-waves
          icon="el-icon-search"
          @click="handleFilter"
        >搜索</el-button>
      </div>
      <div>
        <el-row :gutter="20">
          <el-col :span="6" :xs="24" :lg="6" :sm="12" v-for="item in list" :key="item.id">
            <el-card class="box-card">
              <div slot="header" class="clearfix box-card-header">
                <div style>{{item.title}}</div>
                <div style="padding-top:14px;">
                  <el-button
                    style=" padding: 3px 0"
                    v-if="~accessable.indexOf('theme:goods_reset_limit')"
                    @click="resetBuyLimit(item)"
                    type="text"
                  >清零限购记录</el-button>
                  <el-button
                    style=" padding: 3px 0"
                    v-if="~accessable.indexOf('theme:goods_modify')"
                    @click="handleUpdate(item)"
                    type="text"
                  >修改</el-button>

                  <el-button
                    style=" padding: 3px 0"
                    v-if="item.status==0 && !isOutofDate(item.endTime) && ~accessable.indexOf('theme:goods_delete')"
                    @click="handleDelete(item)"
                    type="text"
                  >删除</el-button>
                </div>
              </div>
              <div class="text item">开始时间: {{item.startTime}}</div>
              <div class="text item">结束时间: {{item.endTime}}</div>
              <div class="text item">限定购买数量: {{item.buyLimitFlag?item.buyLimitNum:'(无)'}}</div>
              <div class="text item">限定购买种类数量: {{item.limitKindFlag?item.limitKindNum:'(无)'}}</div>
              <div class="text item">折扣类型: {{item.discountType|discountTypeFilter}}</div>

              <div
                class="text item"
                v-if="item.discountType == 2"
              >统一价格: ¥ {{item.money}} &nbsp;&nbsp; 统一积分: {{item.points}}</div>
              <div class="text item" v-if="item.discountType == 1">折扣百分比: {{item.discountPercent}}%</div>
              <div class="text item">
                仅标签会员可见:
                <el-tag
                  :type="item.limitLabelShow|statustagFilter"
                >{{item.limitLabelShow|limitLabelFlagFilter}}</el-tag>
              </div>
              <div class="text item">
                限定会员使用:
                <el-tag
                  :type="item.limitLabelFlag|statustagFilter"
                >{{item.limitLabelFlag|limitLabelFlagFilter}}</el-tag>
              </div>
              <div class="text item">
                状态 :
                <el-tag :type="item.status|statustagFilter">{{item.status|statusFilter}}</el-tag>
              </div>
              <div class="bottom clearfix">
                <el-button
                  type="text"
                  v-if="~accessable.indexOf('theme:goods_relate_manage')"
                  style="float:right"
                  @click="manageGoods(item.id)"
                  class="button"
                >商品管理</el-button>
              </div>
              <div class="box-card-bg" :style="{backgroundImage:'url('+ imgUrl(item.cover)+')'}"></div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <el-dialog :title="isEditing?'修改':'添加'" :visible.sync="dialogFormVisible" width="1000px">
        <el-form
          class="dialog-form"
          :rules="rules"
          ref="dataForm"
          :model="temp"
          label-position="left"
          label-width="120px"
        >
          <el-form-item label="主题专区名称" prop="title">
            <el-input v-model="temp.title" placeholder="主题专区名称"></el-input>
          </el-form-item>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="封面" prop="cover">
                <el-upload
                  class="avatar-uploader"
                  :action="UPLOAD_URL"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess('cover')"
                  :before-upload="beforeAvatarUpload"
                >
                  <img v-if="temp.cover" :src="temp.cover|absUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="LOGO" prop="logo">
                <el-upload
                  class="avatar-uploader"
                  :action="UPLOAD_URL"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess('logo')"
                  :before-upload="beforeAvatarUpload"
                >
                  <img v-if="temp.logo" :src="temp.logo|absUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">

            <el-col :span="12">
              <el-form-item label="标签名称" prop="tagTitle">
                  <el-input v-model="temp.tagTitle" placeholder="标签名称"></el-input>
              </el-form-item>
            </el-col>
  
            <el-col :span="12">
              <el-form-item label="标签样式" prop="tagStyle">
                <el-select v-model="temp.tagStyle" placeholder="请选择">
                    <el-option 
                    v-for="item in labelStyle"
                    :key="item.value" 
                    :label="item.label" 
                    :value="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
           
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="标签颜色" prop="color">
                <div class="block">
                  <el-color-picker v-model="temp.color"></el-color-picker>
                </div>
              </el-form-item>
            </el-col>
            <div>
                <el-col :span="12" v-if="temp.tagStyle == 'HOT'">
                  <span class="labelText">建议输入两个字</span>
                  <img src="../goods/labelIcon/hot.png" alt="" width="50px">
                </el-col>
                <el-col :span="12" v-if="temp.tagStyle == '晒图返现'">
                  <span class="labelText">建议输入格式“晒图返现10”</span>
                  <img src="../../assets/labelIcon/return.png" alt="" width="50px">
                </el-col>
                <el-col :span="12" v-if="temp.tagStyle == '热销'">
                  <span class="labelText">建议输入四个字</span>
                  <img src="../../assets/labelIcon/sellwell.png" alt="" width="50px">
                </el-col>
                <el-col :span="12" v-if="temp.tagStyle == '金卡九折'">
                  <span class="labelText">图片无需输入文字</span>
                  <img src="../../assets/labelIcon/goldencard.png" alt="" width="50px">
                </el-col>
                <el-col :span="12" v-if="temp.tagStyle == '新品'">
                  <span class="labelText">建议输入两个字</span>
                  <img src="../../assets/labelIcon/newProducts.png" alt="" width="50px">
                </el-col>
                <el-col :span="12" v-if="temp.tagStyle == '秒杀'">
                  <span class="labelText">建议输入九个字</span>
                  <img src="../../assets/labelIcon/Spike.png" alt="" width="50px">
                </el-col>
                <el-col :span="12" v-if="temp.tagStyle == '新品上市'">
                  <span class="labelText">建议输入四个字</span>
                  <img src="../../assets/labelIcon/newProductslist.png" alt="" width="50px">
                </el-col>
                <el-col :span="12" v-if="temp.tagStyle == '浦发专享'">
                    <span class="labelText">建议输入四个字</span>
                  <img src="../../assets/labelIcon/pufa.png" alt="" width="50px">
                </el-col>
            </div>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="生效时间" prop="startTime">
                <el-date-picker
                  v-model="temp.startTime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  align="right"
                  type="datetime"
                  placeholder="选择生效时间"
                  :picker-options="pickerOptions1"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="失效时间" prop="endTime">
                <el-date-picker
                  v-model="temp.endTime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  align="right"
                  type="datetime"
                  placeholder="选择失效时间"
                  :picker-options="pickerOptions1"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="折扣类型" prop="discountType">
                <el-select v-model="temp.discountType" placeholder="请选择">
                  <el-option
                    v-for="item in discountOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="折扣百分比" prop="discountPercent" v-if="temp.discountType==1">
                <el-input
                  type="number"
                  v-model="temp.discountPercent"
                  placeholder="比如80"
                  style="width:100px;"
                ></el-input>%
              </el-form-item>

              <el-form-item label="统一价" prop="money" v-if="temp.discountType==2">
                <el-input
                  type="number"
                  v-model="temp.money"
                  placeholder="请输入价格"
                  style="width:120px;"
                ></el-input>
              </el-form-item>

              <el-form-item label="统一积分" prop="points" v-if="temp.discountType==2">
                <el-input
                  type="number"
                  v-model="temp.points"
                  placeholder="请输入积分"
                  style="width:120px;"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="发布状态" prop="status">
                <el-radio-group v-model="temp.status">
                  <el-radio
                    v-for="(item,value) in statusFilter"
                    :key="value"
                    :label="value"
                    :value="value"
                  >{{item}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="排序号" prop="sort">
                <el-input-number v-model="temp.sort" :min="0" label="排序号"></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" v-if="temp.status==1">
            <el-col :span="12">
              <el-form-item label="显示开始时间" prop="onlineStartTime">
                <el-date-picker
                  v-model="temp.onlineStartTime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  align="right"
                  type="datetime"
                  placeholder="显示开始时间"
                  :picker-options="pickerOptions1"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="显示结束时间" prop="onlineEndTime">
                <el-date-picker
                  v-model="temp.onlineEndTime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  align="right"
                  type="datetime"
                  placeholder="显示结束时间"
                  :picker-options="pickerOptions1"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="限定购买数量" prop="buyLimitFlag">
                <el-radio-group v-model="temp.buyLimitFlag">
                  <el-radio
                    v-for="(item,value) in limitLabelFlagItems"
                    :key="value"
                    :label="value"
                    :value="value"
                  >{{item}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="temp.buyLimitFlag">
              <el-form-item label="限定数量" prop="buyLimitNum">
                <el-input-number v-model="temp.buyLimitNum" :min="0" label="限定数量"></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="限定购买种类" prop="limitKindFlag">
                <el-radio-group v-model="temp.limitKindFlag">
                  <el-radio
                    v-for="(item,value) in limitLabelFlagItems"
                    :key="value"
                    :label="value"
                    :value="value"
                  >{{item}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="temp.limitKindFlag">
              <el-form-item label="限定种类数量" prop="limitKindNum">
                <el-input-number v-model="temp.limitKindNum" :min="0" label="限定种类数量"></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="限定会员使用" prop="limitLabelFlag">
                <el-radio-group v-model="temp.limitLabelFlag">
                  <el-radio
                    v-for="(item,value) in limitLabelFlagItems"
                    :key="value"
                    :label="value"
                    :value="value"
                  >{{item}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="仅标签会员可见" prop="limitLabelShow">
                <el-radio-group v-model="temp.limitLabelShow">
                  <el-radio
                    v-for="(item,value) in limitLabelFlagItems"
                    :key="value"
                    :label="value"
                    :value="value"
                  >{{item}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="会员标签" prop="labelList" v-if="temp.limitLabelFlag==1">
            <el-checkbox-group v-model="temp.labelList">
              <el-checkbox v-for="item in labelList" :label="item.id" :key="item.id">{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="主商城是否可见" prop="baseListShowFlag">
                <el-radio-group v-model="temp.baseListShowFlag">
                  <el-radio
                    v-for="(item,value) in limitLabelFlagItems"
                    :key="value"
                    :label="value"
                    :value="value"
                  >{{item}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="temp.baseListShowFlag">
              <el-form-item label="非标签会员主商城购买" label-width="180px" prop="baseListUnlabelBuyFlag">
                <el-radio-group v-model="temp.baseListUnlabelBuyFlag">
                  <el-radio
                    v-for="(item,value) in limitLabelFlagItems"
                    :key="value"
                    :label="value"
                    :value="value"
                  >{{item}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="非标签会员提示" label-width="130px" prop="buyLimitNotice">
                  <el-input v-model="temp.buyLimitNotice" placeholder="请输入非标签会员提示语"></el-input>
              </el-form-item>
            </el-col>
          </el-row>


          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="非标签会员提示跳转类型" label-width="200px" prop="buyLimitLinkType">
                <el-select v-model="temp.buyLimitLinkType" placeholder="请选择非标签会员提示跳转类型">
                  <el-option
                    v-for="item in buyLimitLinkTypeTips"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="24" v-if="temp.buyLimitLinkType==1">
              <el-form-item label="提示详情页面编辑" label-width="150px" prop="buyLimitDesc">
                <div class="quill-wrap" style="height:500px;">
                  <quill-editor style="height:400px;" v-model="temp.buyLimitDesc" ref="myQuillEditor" :options="editorOption">
                  </quill-editor>
                </div>
              </el-form-item>
            </el-col>

            <el-col :span="12" v-if="temp.buyLimitLinkType==2">
              <el-form-item label="购买限制url地址" label-width="130px" prop="buyLimitLinkUrl">
                  <el-input v-model="temp.buyLimitLinkUrl" placeholder="请输入购买限制说明链接地址"></el-input>
              </el-form-item>
            </el-col>

          </el-row>

        
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" :loading="submiting" @click="submitFormAction">确定</el-button>
        </div>
      </el-dialog>
    </div>

    <router-view></router-view>
  </div>
</template>

<script>
import { parseTime } from '../../filters/index';
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor, Quill } from 'vue-quill-editor'
import { container, ImageExtend, QuillWatch } from 'quill-image-extend-module'
Quill.register('modules/ImageExtend', ImageExtend)
let statusFilter = ['下线', '上线']
let limitLabelFlagItems = ['否', '是']
let statustagFilter = ['danger', 'success', 'info', 'warning']
let discountOptions = [
  {
    value: 1,
    label: '打折'
  },
  {
    value: 2,
    label: '统一价'
  }
]
let labelStyle1 = [
  {
    value: 1,
    label: "HOT"
  },
  {
    value: 2,
    label: "晒图返现"
  },
  {
    value: 3,
    label: "热销"
  },
  {
    value: 4,
    label: "金卡九折"
  },
  {
    value: 5,
    label: "新品"
  },
  {
    value: 6,
    label: "秒杀"
  },
  {
    value: 7,
    label: "新品上市"
  },
  {
    value: 8,
    label: "浦发专享"
  },

]
export default {
  watch: {
    $route () {
      if (this.$route.name == 'goods_theme.special_center.manage') {
        this.isManage = true
      } else {
        this.isManage = false
      }
    }
  },
  created () {
    this.filters.history = 0
    if (this.$route.name == 'goods_theme.special_center.manage') {
      this.isManage = true
    } else {
      this.isManage = false
    }
    this.loadData()
    this.$get('/admin/goods_theme/label_list').then(data => {
      this.labelList = data
    })

    // var arr = []
    // for(var i of this.labelStyle){
    //   this.labelStyle = i
    //   console.log(this.labelStyle)
    //   arr.push(i);
    //   console.log(arr)
    // }

  },
  filters: {
    statusFilter (status) {
      return statusFilter[parseInt(status)]
    },
    limitLabelFlagFilter (status) {
      return ['否', '是'][status || 0]
    },
    statustagFilter (status) {
      return statustagFilter[parseInt(status)]
    },
    discountTypeFilter (v) {
      let rt
      discountOptions.forEach(el => {
        if (el.value == v) {
          rt = el.label
        }
      })
      return rt
    },
    background (color) {
      return 'background:' + color
    }
  },
  components: {
    quillEditor
  },
  methods: {
    history () {
      this.filters.history = 1
      this.handleFilter()
    },
    now () {
      this.filters.history = 0
      this.handleFilter()
    },
    // loadData () {
    //   this.$post('/admin/goods_theme/list_all', this.postParams).then(data => {
    //     data = data.rows
    //     this.list = data
    //   })
    // },
    resetBuyLimit (row) {
      this.$confirm('确定清零限购记录吗?', '提示').then(_ => {
        this.$post('/admin/goods_theme/reset_buy_limit', {
          id: row.id
        }).then(data => {
          this.$$notify('清零成功')
        })
      })
    },
    isOutofDate (date) {
      return date < this.getNow()
    },
    handleFilter () {
      this.loadData()
    },
    handleDelete (row) {
      this.$confirm('确定删除该主题专区吗?', '提示').then(_ => {
        this.$post('/admin/goods_theme/delete', {
          id: row.id
        }).then(data => {
          this.loadData()
        })
      })
    },
    loadData () {
      this.$get('/admin/goods_theme/list_all', this.filters).then(data => {
        data.forEach(el => {
          el.startTime && (el.startTime = parseTime(el.startTime))
          el.onlineStartTime &&
            (el.onlineStartTime = parseTime(el.onlineStartTime))
          el.onlineEndTime && (el.onlineEndTime = parseTime(el.onlineEndTime))
          el.endTime && (el.endTime = parseTime(el.endTime))
          el.labelList &&
            (el.labelList = el.labelList.map(i => {
              return i.labelId
            }))
        })
        this.list = data
      })
    },
    manageGoods (id) {
      this.$router.push('/goods/goods_theme/manage?id=' + id)
    },
    findNameByLabelId (id) {
      let rt = '';
      this.labelList.every(el => {
        if (el.id == id) {
          rt = el.name
          return false
        }
        return true
      })
      return rt
    },

    submitFormAction () {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.submiting = true
          let func = null

          let map = {}
          let idx = 0
          this.temp.labelList.forEach(el => {
            if (
              this.labelList.some(c => {
                return c.id == el
              })
            ) {
              map[`labelList[${idx}].labelId`] = el
              map[`labelList[${idx}].labelName`] = this.findNameByLabelId(el)
              idx++
            }
          })
          Object.assign(map, this.temp)
          delete map.labelList
          if (this.isEditing) {
            func = this.$post('/admin/goods_theme/modify', map)
          } else {
            func = this.$post('/admin/goods_theme/add', map)
          }
          func
            .then(() => {
              this.submiting = false
              this.dialogFormVisible = false
              this.$notify({
                title: '成功',
                message: '操作成功',
                type: 'success',
                duration: 2000
              })
              this.loadData()
            })
            .catch(info => {
              this.submiting = false
              // this.$message({
              //   type: "warning",
              //   message: info || "更新失败!"
              // });
            })
        }
      })
    }
  },

  data () {
    return {
      isManage: false,
      discountOptions,
      dialogFormVisible: false,
      labelList: [],
      labelStyle : [
        {
          value: 1,
          label: "HOT"
        },
        {
          value: 2,
          label: "晒图返现"
        },
        {
          value: 3,
          label: "热销"
        },
        {
          value: 4,
          label: "金卡九折"
        },
        {
          value: 5,
          label: "新品"
        },
        {
          value: 6,
          label: "秒杀"
        },
        {
          value: 7,
          label: "新品上市"
        },
        {
          value: 8,
          label: "浦发专享"
        },

      ],
      buyLimitLinkTypeTips:[
        {
          value: 1,
          label: "图文说明"
        },
        {
          value: 2,
          label: "其他页面链接"
        }
      ],
      temp: {
        labelList: [],
        limitLabelShow: 0,
        id: '',
        title: '',
        color: '',
        tagStyle:'',
        tagTitle:'',
        points: 0,
        startTime: '',
        discountType: '',
        buyLimitFlag: null,
        onlineStartTime: '',
        onlineEndTime: '',
        limitKindFlag: null,
        money: '',
        discountPercent: '',
        buyLimitNum: 0,
        limitKindNum: 0,
        endTime: '',
        limitLabelFlag: '',

        baseListShowFlag:'',
        baseListUnlabelBuyFlag:'',
        buyLimitNotice:'',
        buyLimitLinkType:'',
        buyLimitLinkUrl:'',
        buyLimitDesc:'',

        status: '',
        sort: 0,
        logo: '',
        cover: ''
      },
      editorOption: {
        placeholder: '在这里输入内容!',
        modules: {
          ImageExtend: {
            loading: true,
            name: 'file',
            action: '/util/upload',
            response: res => {
              return (
                'http://weixin-ostorage01.oss-cn-shenzhen.aliyuncs.com' +
                res.info
              )
            }
          },
          toolbar: {
            container: container,
            handlers: {
              image: function () {
                QuillWatch.emit(this.quill.id)
              }
            }
          }
        }
      },
      limitLabelFlagItems,
      statusFilter: statusFilter,
      pickerOptions1: {
        //   disabledDate(time) {
        //     return time.getTime() > Date.now();
        //   },
        shortcuts: [
          {
            text: '今天',
            onClick (picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: '昨天',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一周前',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
      },
      rules: {
        title: [
          {
            required: true,
            message: '特价活动名称不能为空',
            trigger: 'change'
          },
          {
            max: 50,
            message: '特价活动名称不能大于50个字',
            trigger: 'change'
          }
        ],
        color: [
          {
            required: true,
            message: '标题颜色必须指定',
            trigger: 'change'
          }
        ],
        // tagStyle: [
        //   {
        //     required: true,
        //     message: '标题样式必须选择',
        //     trigger: 'change'
        //   }
        // ],
        tagTitle: [
          {
            required: true,
            message: '标题必须输入',
            trigger: 'change'
          }
        ],
        limitLabelShow: [
          {
            required: true,
            message: '请选择仅标签会员可见',
            trigger: 'change'
          }
        ],
        startTime: [
          {
            required: true,
            message: '生效时间不能为空',
            trigger: 'change'
          }
        ],

        endTime: [
          {
            required: true,
            message: '失效时间不能为空',
            trigger: 'change'
          }
        ],
        onlineStartTime: [
          {
            required: true,
            message: '显示开始时间不能为空',
            trigger: 'change'
          }
        ],
        onlineEndTime: [
          {
            required: true,
            message: '显示结束时间不能为空',
            trigger: 'change'
          }
        ],
        discountType: [
          {
            required: true,
            message: '折扣类型必须指定',
            trigger: 'change'
          }
        ],

        discountPercent: [
          {
            required: true,
            message: '折扣比例必须指定',
            trigger: 'change'
          }
        ],
        money: [
          {
            required: true,
            message: '统一价必须指定',
            trigger: 'change'
          }
        ],
        cover: [
          {
            required: true,
            message: '请上传封面',
            trigger: 'change'
          }
        ],
        logo: [
          {
            required: true,
            message: '请上传logo',
            trigger: 'change'
          }
        ],
        points: [
          {
            required: true,
            message: '统一积分必须指定',
            trigger: 'change'
          }
        ],

        status: [
          {
            required: true,
            message: '请选中发布状态',
            trigger: 'change'
          }
        ],
        buyLimitFlag: [
          {
            required: true,
            message: '请选择是否限定购买数量',
            trigger: 'change'
          }
        ],
        buyLimitNum: [
          {
            required: true,
            message: '请填写限定购买数量',
            trigger: 'change'
          }
        ],
        limitKindFlag: [
          {
            required: true,
            message: '请选择是否限定购买种类',
            trigger: 'change'
          }
        ],
        limitKindNum: [
          {
            required: true,
            message: '请填写限定种类数量',
            trigger: 'change'
          }
        ],
        limitLabelFlag: [
          {
            required: true,
            message: '请选择是否限定会员使用',
            trigger: 'change'
          }
        ],
        baseListShowFlag: [
          {
            required: true,
            message: '请选择是否主商城可见',
            trigger: 'change'
          }
        ],
        baseListUnlabelBuyFlag: [
          {
            required: true,
            message: '请选择是否非标签会员主商城购买',
            trigger: 'change'
          }
        ],
        buyLimitNotice: [
          {
            required: true,
            message: '请输入非标签会员提示语',
            trigger: 'change'
          }
        ],
        buyLimitLinkType: [
          {
            required: true,
            message: '请选择非标签会员提示跳转类型',
            trigger: 'change'
          }
        ],
        buyLimitDesc: [
          {
            required: true,
            message: '请输入提示详情页面编辑',
            trigger: 'change'
          }
        ],
        buyLimitLinkUrl: [
          {
            required: true,
            message: '请输入购买限制说明链接地址',
            trigger: 'change'
          }
        ]


      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .labelText{
    display: block;
    color: #f56c6c;
    font-size: 14px;
    margin-bottom: 20px;
  }
.item {
  line-height: 2.5em;
}

.box-card {
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}

.box-card-bg {
  position: absolute;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: block;
  opacity: 0.05;
  z-index: 0;
}
.box-card-header {
  position: relative;
  z-index: 2;
}
.box-card .item {
  position: relative;
  z-index: 2;
}
.box-card .bottom {
  position: relative;
  z-index: 2;
}
.history {
  margin-bottom: 10px;
}
</style>
